import React, { useEffect, useState } from 'react'
import { getUserListFn } from '../../api/user'
import { Table } from 'antd';




export default function Index() {

    const [userList, setuserList] = useState([])

    // 表示的是当前页码
    const [current, setcurrent] = useState(1)


    const columns = [
        {
            title: '序号',
            dataIndex: 'telcode',
            // render 是用来自定义列的内容，一般用户复杂布局使用的
            render(text, record, index) {
                /*
                    text 是当前列配置的 dataIndex 的值，如果没有设置 dataIndex，他就是所有数据
                    record 当前所有数据
                    index 当前索引值
                */
                // console.log(text, record, index);

                return <span>{(current - 1) * 10 + index + 1}</span>
            }
        }, {
            title: '名称',
            dataIndex: 'nickname'
        }, {
            title: '手机号',
            dataIndex: 'tel'
        }, {
            title: '用户 id ',
            dataIndex: 'userid'
        }
    ]


    useEffect(() => {
        getUserListFn().then(res => {
            // console.log(res.data);
            setuserList(res.data)
        })
    }, [])

    return (
        <div>
            <h3>用户列表</h3>

            <Table
                columns={columns}
                dataSource={userList}
                rowKey={'userid'}
                pagination={{
                    current,
                    onChange(page) {
                        // 记录当前页
                        setcurrent(page)
                    }
                }} />

        </div>
    )
}
